<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格查询</title>
    <#assign base=request.contextPath  />
    <base id="base" href="${base}">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, adminUser-scalable=0">
    <link rel="stylesheet" href="${base}/static/win10/component/layui/css/layui.css" media="all">
    <script>
        var base =  "${base}";
    </script>
</head>
<body>
<br>


<div class="demoTable" style="margin-left: 15px;">
    <form class="layui-form " action="" >
    <div class="layui-form-item">
        <label> (0在库/1调出/2已报废/3借出(校外))其他所属人id</label>
        <div class="layui-inline">
            <input class="layui-input" name="userId" id="userId" autocomplete="off">
        </div>
        <label>1航材 / 2耗材</label>
        <div class="layui-inline">
            <input class="layui-input" name="goodsType" id="goodsType" autocomplete="off">
        </div>
        <label>物品名称</label>
        <div class="layui-inline">
            <input class="layui-input" name="goodsName" id="goodsName" autocomplete="off">
        </div>
        <label>计量单位</label>
        <div class="layui-inline">
            <input class="layui-input" name="company" id="company" autocomplete="off">
        </div>
        <label>耗材在库数量 /(航材数量为1) </label>
        <div class="layui-inline">
            <input class="layui-input" name="number" id="number" autocomplete="off">
        </div>
        <label>规格型号</label>
        <div class="layui-inline">
            <input class="layui-input" name="model" id="model" autocomplete="off">
        </div>
        <label>单价</label>
        <div class="layui-inline">
            <input class="layui-input" name="price" id="price" autocomplete="off">
        </div>
        <label>增加原因</label>
        <div class="layui-inline">
            <input class="layui-input" name="reason" id="reason" autocomplete="off">
        </div>
        <label>备注</label>
        <div class="layui-inline">
            <input class="layui-input" name="remarks" id="remarks" autocomplete="off">
        </div>
        <label>实体图片 </label>
        <div class="layui-inline">
            <input class="layui-input" name="entityImgUrl" id="entityImgUrl" autocomplete="off">
        </div>
        <label>相关凭证</label>
        <div class="layui-inline">
            <input class="layui-input" name="voucherImgUrl" id="voucherImgUrl" autocomplete="off">
        </div>
        <label>相关凭证名称</label>
        <div class="layui-inline">
            <input class="layui-input" name="voucherImgName" id="voucherImgName" autocomplete="off">
        </div>
        <label>实体图片名称</label>
        <div class="layui-inline">
            <input class="layui-input" name="entityImgName" id="entityImgName" autocomplete="off">
        </div>
        <label>日期单号（关联 date_no_id）</label>
        <div class="layui-inline">
            <input class="layui-input" name="dateNoId" id="dateNoId" autocomplete="off">
        </div>
        <label>修改时间</label>
        <div class="layui-inline">
            <input class="layui-input" name="updateTime" id="updateTime" autocomplete="off">
        </div>
        <label>创建时间</label>
        <div class="layui-inline">
            <input class="layui-input" name="createTime" id="createTime" autocomplete="off">
        </div>
        <button type="button" class="layui-btn" data-type="reload">
            <i class="layui-icon layui-icon-search">搜索</i>
        </button>
    </div>
    </form>
</div>
<table class="layui-hide" id="test" lay-filter="test"></table>
<script type="text/html" id="toolbarDemo">


    <form class="layui-form " action="">
        <div class="layui-form-item" style="margin-left: 15px;">
            <div class="layui-btn-group">
                <button type="button" class="layui-btn" lay-event="add">增加</button>
                <button type="button" class="layui-btn" lay-event="del">删除</button>
            </div>
        </div>

    </form>
</script>

<script src="${base}/static/win10/component/layui/layui.js?t=1"></script>
<script src="${base}/static/win10/js/jquery-1.8.3.min.js?t=1"></script>
<script>
    layui.use(['table'], function () {

        // 设置全局变量以保存选中行信息
        var ids = new Array();
        // 保存当前页全部数据id，点击全选时使用
        var tableIds = new Array();


        var table = layui.table;
        table.render({
            skin: 'line' //行边框风格
            , even: true //开启隔行背景
            , elem: '#test'
            , url: base + '/api/goods/admin/findGoodsByPage'
            , toolbar: '#toolbarDemo'
            , cols: [[
                {type: 'checkbox'},
                  {field: 'id', title: 'id 物品id'},
                  {field: 'userId', title: ' (0在库/1调出/2已报废/3借出(校外))其他所属人id'},
                  {field: 'goodsType', title: '1航材 / 2耗材'},
                  {field: 'goodsName', title: '物品名称'},
                  {field: 'company', title: '计量单位'},
                  {field: 'number', title: '耗材在库数量 /(航材数量为1) '},
                  {field: 'model', title: '规格型号'},
                  {field: 'price', title: '单价'},
                  {field: 'reason', title: '增加原因'},
                  {field: 'remarks', title: '备注'},
                  {field: 'entityImgUrl', title: '实体图片 '},
                  {field: 'voucherImgUrl', title: '相关凭证'},
                  {field: 'voucherImgName', title: '相关凭证名称'},
                  {field: 'entityImgName', title: '实体图片名称'},
                  {field: 'dateNoId', title: '日期单号（关联 date_no_id）'},
                  {field: 'updateTime', title: '修改时间'},
                      {field: 'createTime', title: '创建时间'}
            ]]
            , page: true
            , id: 'testReload'
            , done: function (res) {

                // 设置当前页全部数据id到全局变量
                tableIds = res.data.map(function (value) {

                    return value.id;
                });


                // 设置当前页选中项
                $.each(res.data, function (idx, val) {


                    if (ids.indexOf(val.id) > -1) {

                        val["LAY_CHECKED"] = 'true';

                        //找到对应数据改变勾选样式，呈现出选中效果
                        let index = val['LAY_TABLE_INDEX'];


                        $('tr[data-index=' + index + '] input[type="toolbar"]').click();
                        form.render('toolbar'); //刷新toolbar选择框渲染
                    }
                });
                // 获取表格勾选状态，全选中时设置全选框选中
                var checkStatus = table.checkStatus('test');
                if (checkStatus.isAll) {
                    $('.layui-table-header th[data-field="0"] input[type="toolbar"]').prop('checked', true);
                    form.render('toolbar'); //刷新toolbar选择框渲染
                }
            }
        });
        //搜索
        var $ = layui.$, active = {
            reload: function(){
                //执行重载
                table.reload('testReload', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where: {
                                    userId:$("#userId").val(),
                                    goodsType:$("#goodsType").val(),
                                    goodsName:$("#goodsName").val(),
                                    company:$("#company").val(),
                                    number:$("#number").val(),
                                    model:$("#model").val(),
                                    price:$("#price").val(),
                                    reason:$("#reason").val(),
                                    remarks:$("#remarks").val(),
                                    entityImgUrl:$("#entityImgUrl").val(),
                                    voucherImgUrl:$("#voucherImgUrl").val(),
                                    voucherImgName:$("#voucherImgName").val(),
                                    entityImgName:$("#entityImgName").val(),
                                    dateNoId:$("#dateNoId").val(),
                                    updateTime:$("#updateTime").val(),
                                    createTime:$("#createTime").val()
                    }
                }, 'data');
            }
        };
        $('.demoTable .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });





        //头工具栏事件
        table.on('toolbar(test)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id); //获取选中行状态
            var data = checkStatus.data;  //获取选中行数据

            var idList = []
            for (let i = 0; i < data.length; i++) {
                idList.push(data[i].id)
            }


            switch (obj.event) {
                case 'add':
                    //请继续补充以下逻辑
                    window.location.href=base+"/api/goods/admin/addGoodsHtml"
                    break;
                case 'edit':
                    if (data.length === 0) {
                        layer.alert("请选择一条数据")
                        return;
                    }
                    //请继续补充以下逻辑
                    window.location.href=base+"/api/goods/admin/editGoodsHtml?id=" + data[0].id
                    break;
                case 'show':
                    if (data.length === 0) {
                        layer.alert("请选择一条数据")
                        return;
                    }
                    //请继续补充以下逻辑
                    window.location.href=base+"/api/goods/admin/showGoodsHtml?id=" + data[0].id
                    break;
                case 'del':
                    if (data.length === 0) {
                        layer.alert("请选择一条数据")
                        return;
                    }
                    layer.confirm('真的要删除吗?',function(index){
                        $.ajax({
                            type:"POST",
                            url:base+'/api/goods/admin/delGoods',
                            data:{"datas":idList},
                            dataType: "json",
                            success:function(data){
                                if(data.code===200){
                                    layer.msg(data.message)
                                    setTimeout(function () {
                                        window.location.reload();
                                    }, 500)
                                }else{
                                    layer.msg(data.message)
                                }
                            }
                        });
                    });
                    break;
            };
        });
        //监听行双击事件
        table.on('rowDouble(test)', function (obj) {
            var data = obj.data;
            window.location.href=base+"/api/goods/admin/showGoodsHtml?id=" + data.id
        });
    })
</script>
</body>
</html>